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FIELD OF THE INVENTION 

The invention relates to end-user tools for defining, creating, and editing graphical user interfaces. More 
particularly, the invention relates to compilation of the user modified graphical user interface. The method 
5 includes the first step of opening a graphical user interface source code file, for example, for defining, 
creating, or editing. Next, the graphical user interface source code file is compiled to form a graphical user 
interface object code file. The compiled graphical user interface object code file is then stored in a Panel 
Binary Interface file. 

w CROSS REFERENCE RELATED APPLICATIONS 

This application is related to the commonly assigned, copending. United States Patent Applications, 
filed on even date herewith: 

1. Application of Robert P. Hoffmann, Jerry W. Malcolm. John O. Montgomery, and Steve S. Stone for 
;5 Graphical User In terface Including Dynamic Sizing and Spacing , US serial number 864,766. 

2. Application of John P. Barrett, Robert P. Hoffmann, and John D. Montgomery for Graphical User 
Interfa ce Including Group Actions on What You See Is What You Get (WYSIWYG) Editor , US serial 
number 864,732. 

3. Application of John P. Barrett, David M. Dapkiewicz, Robert P. Hoffmann, Jerry W. Malcolm, John 
20 Montgomery, and Scott Sylvester for Graphical User Interface Including User Control of What You See Is 

What You Get (WYSIWYG) Editor Objects , US serial number 863.919. 

4. Application of John P. Barrett, Robert P. Hoffmann, and John D. Montgomery for Graphical User 
Interface Including Updating of Multiple Panels Using What You See Is What You Get (WYSIWYG) 
Editor, US serial number 864,770. 8910515. 

25 5. Application of Robert P. Hoffmann for Graphical User Interface Including What You See Is What You 
Get ( WYSIWYG) Creation of Action Bar , US serial number 864,775. 

BACKGROUND OF THE INVENTION 

30 The user interface is the most visible part of a computer. It is the iink between the application software 

and the end-user. Historically, user interfaces have been alpha-numeric character based user interfaces. 

Graphical user interfaces utilize graphical objects to replace and/or supplement alpha-numeric user 
interfaces. In this way, graphical user interfaces enhance the end-user's and/or application programmer's 
productivity. 

35 Graphical User Interfaces use graphical images to represent real world objects. A graphical user 

interface panel is shown in FIGURE 1, denominated "Prior Art." The Graphical User Interface, 1, of FIGURE 
1 has a plurality of graphical images, 11, 21, and 31. These graphical images, 11, 21, and 31. also called 
icons, are smaller then the display size. This gives the graphical user interface panel, 1, the ability to 
simultaneously display multiple "windows" of text, 41, and images, 11, 21, and 31, on the same physical 

40 display, 1. 

Graphical User Interfaces have the ability to employ both graphical inputs and alphanumeric inputs. 
Exemplary graphical inputs include "point and click" devices, mice ; touch panels, "light pens," and the like. 
Exemplary alphanumeric inputs are keyboard inputs. 

Graphical User Interfaces are more intuitive and easier to learn and use then keyboard alphanumeric 
45 inputs. This results in higher end-user productivity. 

Notwithstanding their wide end-user acceptance and ease of use, graphical user interfaces have 
problems. Most significantly, Graphical User Interfaces are complex to program, i.e., they are difficult to 
define, create, and edit. Graphical user interface programming requires a high level of skill with a long 
learning curve. 

so Thus, a need exists for a Graphical User Interface editor that enables an end-user .to define, create, or 

edit a Graphical User Interface. In order for an end-user to define, create, or edit a Graphical User Interface, 
the end-user needs the ability to use a What-You-See-ls-What-You-Get (WYSIWYG) editor and/or a text 
editor interchangeably and compile and save the resulting (edited or created) Graphical User Interface 
panel. This ability to define (create or revise a GUI panel) is lacking in the prior art. This is because the 

55 prior art graphical user interface editors do not maintain the integrity of the source file once manual updates 
are made with a text editor. 
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OBJECTS OF THE INVENTION 

A primary object of the invention is to provide a Graphical User Interface editor that enables an end- 
user to define, create, or edit a Graphical User Interface. 
5 A further object of the invention is to provide a user-friendly Graphical User Interface editor, that is, a 

Graphical User Interface editor that interchangeability utilizes a What-You-See-ls-What-You-Get (WYSIWYG) 
editor and'or a text editor interchangeably. 

A further object of the invention is provide the end-user with the ability to compile and save the 
resulting (edited or created) GUI panel, 
/o A still further object of the invention is provide the end-user with the ability to save the edited source 
code corresponding to the edited GUI panel. This enhances the ability of the end-user to further modify or 
edit, or even copy, the Graphical User Interface Fife. 

SUMMARY OF THE INVENTION 

75 

These and other objects are obtained by the method of the invention. The invention provides end-user 
tools for defining, creating, and editing graphical user interfaces. 

The invention provides a method for compiling user modified graphical user interface. The method 
includes the first step of opening a graphical user interface source code file, for example, for defining, 
20 creating, or editing. Next, the graphical user interface source code file is compiled to form a graphical user 
interface object code file. The compiled graphical user interface object code file is then stored in a Panel 
Binary Interface file. 

The method of the invention starts with opening a graphical user interface source code file. Next, the 
graphical user interface source code file is compiled to form a graphical user interface object code file. The 
25 compiled graphical user interface object code file is then stored in a Panel Binary Interface file. 

THE FIGURES 

The invention may be understood by reference to the FIGURES appended hereto. 
30 FIGURE 1 is a representation of a Graphical User Interface. This FIGURE is denominated "Prior Art." 

FIGURE 2 is a graphical overview of a flow chart of the Graphical User Interface Editor of the invention. 
FIGURE 3 is a representation of the modules and their relationship for the Graphical User Interface 
Editor of the invention. 

FIGURE 4 is a listing of a portion of a user accessible tag file (.PDF). 
35 FIGURE 5. including FIGURES 5A, 5B, and 5C a representation of the modules and the process of the 

invention. 

DETAILED DESCRIPTION OF THE INVENTION 

40 According to the method of the invention User Interface (Ul) panels are created and maintained using 

either a "What You See Is What You Get" (WYSIWYG) editor including panel definition (tag) language or a 
text editor. 

System Overview 

45 

As shown in FIGURES 2 and 3, a software interface is established between the Graphical User Interface 
Editor (GUIE) and the User Interface Compiler (UIC) joint by an Application Program Interface rather then a 
process call. The use of an Application Program Interface instead of a process call reduces overhead. 

Using the Graphical User Interface Editor (GUIE) or a text editor, the end-user can create compilable 
so and storable GUI source files. These source files contain tag language which defines Graphical User 
Interface (GUI) panels. The tag language files are the only input to and output of the GUIE. Tag language 
files can be generated by the GUIE. modified with a text editor, read back to the GUIE, and then compiled, 
in the user interface compiler (UIC). Any. such modifications will be preserved (by the software link between 
the GUIE and the UIC) and contained in the tag language file that is created by GUIE. This maintains the 
55 integrity of the source file regardless of how it is edited. This process can be repeated as many times as 
necessary, providing maximum flexibility to the user in creating and modifying panels. 

The components of the system include the User Interface Editor (UIE), the build time tools including a 
panel definition language, a panel language compiler and linker, and a run time support package. The build 
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time tools include a What You See Is What You Get (WYSIWYG) panel creation editor. A WYSIWYG panel 
creation editor allows fast panel creation through the use of direct user manipulation of panel objects 
represented by icons. This assists the application builder, that is, the end-user, with the layout of the panel, 
allowing the end-user to concentrate on the panel layout instead of panel formatting details. 

5 The panel definition language is the method of creating the panel definitions. As utilized herein, the 

panel definition language is tag language. 

The panel language compiler and linker is a tool that reads and writes panel definition files, so that 
these files can be created and/or updated with a text editor and read back into the WYSIWYG tool. The 
compiler and linker works by integrating the WYSIWYG panel creation editor and Panel definition language, 

w converting the panel definition language files to a set of intermediate files which allow the separation and 
isolation of panel text. The compiling and linking function is the key to enabling support of various graphical 
user interface platforms. The panel language linker combines groups of platform independent intermediate 
files into platform specific run time panel definitions. 

The run time support is a client-server architecture where one copy of the Ul server is loaded onto each 

is Ul display node. Application programs can request Ul support services concurrently from local and remote 
Ul servers through the use of a single, high function Application Program Interface (API). The Ul operational 
parameters, such as the destination Ul server name and the panel library names are contained in a Ul 
control block located on the same node as the Ul client application. The control block allows run time 
modification of the client application Ul parameters without modification to the application. 

20 The Ul run time object set includes panels (windows) and message boxes, and any of the controls such 

as list boxes and entry boxes that can be placed in a panel. Each object is characterized by one or more 
attributes, such as display properties, text, entry characteristics, and user data. 

The panel Action Ul request enables the client application to perform data exchange actions (set, query, 
update) on all objects as well as immediate control actions such as lock/unlock and hide/show on panel 

25 objects. 

The Ul API contains a Connection Group-connect/disconnect function. This is because a client 
application can concurrently use the display services of more then one Ul server, a client application first 
establishes a unique session with a destination Ul server. 

The User Interface Application Program Interface (Ul API) also includes a Display Group- get panel, 
30 display panel, panel action, display message box function. This function enables an application to request 
that a panel be loaded into memory by a Ul server, perform data exchange and immediate control actions 
on the objects, display the panel, and display message services. 

The User Interface Application Program Interface (Ul API) also includes a User Exit Group. This function 
sets the user exit, and processes the user exit event. The user exits enable the application program to be 
35 notified immediately of user initiated panel actions. This request sets a user exit at the panel or control 
object level. Using user exits, the Ul portion of the application can be constructed in a modular fashion 
maximizing code reuse. 

The method of the invention utilizes a tag language source code file to define a Graphical User Interface 
(GUI) panel. A source code tag language file, that is a .PDF file, that the WYSIWYG editor produces is 
40 shown in FIGURE 4. To be noted is that each entry from the colon, to me period, V\ is a single tag. 

These tag files (.PDF files) are internally joined together in the form of a linked list. An exemplary linked 
list is shown in Table I. 

Table I 

45 



Linked List 


Address 


Object Type 


Size (x,y) 


Location (x ( y) 


Text 


Pointer To Next 












Object 


1 


Windowdef 


50,50 


0,0 


Panel A 


2 


2 


Checkbox 


2. 7 


10,10 


Option A 


3 


3 


Checkbox 


2, 7 


20,10 


Option B 


4 


4 


Ewindowdef 


0,0 


0, 0 




0 



55 

Looking at Table I, it is seen that the a window is defined, Windowdef, as Panel A, it is of size 50 by 50, 
and is located at 0,0. The tag file defining the window is Panel A. The next item in the linked list is at 
address 2 of the list. It is the Checkbox of size 2 by 7 at 10, 10, having the tag file Option A. The next item 
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on the linked list is at address 3. This is another checkbox, of size 2 by 7, located at 20,10, and defined by 
text file Option B. The next item on the linked list is the Ewindowdef. 

The end-user can edit this tag language source code file with a graphical What-You-See-ls-What-You- 
Get (WYSIWYG) editor and or a text editor interchangeably. The method of the invention compiles and 
5 saves the resulting (edited or created) GUI panel, providing both a source code GUI panel file and an object 
code GUI file. This maintains the integrity of the GUI source code file after manual updates have been 
made with a text editor. 

The User Interface Compiler-Linker 

w 

The User Interface Compiler compiles the panel defining tag files to yield Panel Binary Intermediate 
(PBI) files. Exemplary pseudo-code is: 
Compiler reads the file. 

Compiler parses the tags and calls the tag method to build to build the object lists. 
15 Compiler writes the object lists to the Panel Binary Intermediate (PBI) file. 

The ability to create, define, edit, and modify panels in tag language, and then compile the source code 
Tag files to object code, saving both the source code and the object code, is made possible by fully 
integrating the GUIE and the UIC through the software link therebetween. 

Utilizing this software link, when a tag language file is read in to GUIE. it invokes UIC. The UIC converts 
20 the source tags to a binary representation, and writes it to a file. The GUIE then reads this binary file into a 
structure in memory and uses it to keep track of ail panel updates made by the user. When all desired 
modifications have been completed. U1E creates source tags from the binary data structure and writes them 
to a user-specified file. 

The resulting system, supporting text and graphical images, is an easy to learn and easy to:use client- 
25 server graphical user interface function. It provides a highly productive environment for developing and 
maintaining GUI's and user interface application panels and software through the full life cycle of an 
application program. The Graphical User Interface system of the invention is a graphical user interface 
supporting an asynchronous, event driven style of programming. 

30 The Graphical User Interface Source Code File and Graphical User Interface Editor 

The Graphical User Interface Editor (GUIE) is a visual interface where windows, message boxes, and 
controls are represented by icons. By using a mouse, touch panel, or arrow keys, the user moves controls 
into windows and message boxes. After moving the controls, attributes are assigned to the controls. This 
35 action results in the definition, creation, or modification of a Panel Definition File (.PDF). It should also be 
noted that the end-user can also use the User Interface editor to display or modify any source tags stored 
in a .PDF file that was built using a text editor. The user can use any text editor to build windows, message 
boxes, and controls. For example, the end-user can create a window or a message box by typing 
:windowdef or :message, as appropriate. In this way, the user can use a text editor to display or modify 
40 any source tags store in a Panel Definition File (.PDF) using either the User Interface Editor or a text editor. 

The next step is saving the Pane! Definition File (.PDF), e.g., a panel definition file containing a window 
or a message box. The save action automatically converts the window or message box being saved into 
source tag that contain the definitions needed by the Ul tools to create a window or message box. 

When the user then opens a Panel Definition File (.PDF) that was built using either the User Interface 
45 Editor or the text editor, the "open" action cause the source tags stored in the Panel Definition File (.PDF) 
to be compiled and displayed as a window or message box. 

The panels are defined using tags. Tags are one or more characters attached to a set of data that 
contain information about the set. including its identification. A tag can be a lexical unit that names a 
language object: for example, the names of variables, arrays, records, labels, and procedures. Alternatively, 
so a tag can be a set of bits or characters that identifies various conditions about data in a file. These bits or 
characters, when present, are often found in the header records of such files; a name-label, mnemonic - 
assigned to a data structure, such as a file, field, paragraph, or other object. 

A "tag" consists of a specific tag name along with any required or optional parameters. The user can 
add controls to a window or message box by typing control control tags within window definition tags or 
55 message box definition tags. 

TAG Types include: 

Compiler Tags- Compiler Tags specify information to the compiler. This information can be used either 
to control the compiler or to specify information that is referenced by other tags. Compiler tags include help 
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text definition tags, help text tags, label definition tags, resource definition tags, text string definition tags, 
and user interface definition file identifiers. 

Message Box and Window Definition Tags - Message Box and Window Tags specify the beginning and 
end of either a message box or a window. 
5 Layout Tags - Layout tags specify the column and row arrangement or other layout information for the 

controls in a window definition. Layout tags include column, division, line mode, window scale factor, space, 
and subitem tags. 

Control Tags - Control tags specify the actual contents that appear in a window definition, and specify 
the controls that appear in a message box. Window definition control tags include check box. column 
w heading, column heading group, combination box, drop down combination box. drop down list, entry field, 
group, icon, list, list item, menu item group, menu item, output field, function key area push button, push 
button, radio button, and static text. Message box definition tags include message box push button and 
message text. 

A window or message box is defined by a series of tags. A tag consists of the specific tag name plus 
75 any required and optional parameters. One tag structure is: 

:tagname parameter = value parameter = value parameter = value 

The Panel Definition File (.PDF), and the tags that make it up have certain characteristics. First, each new 
tag starts on a separate line. Second, blank lines are ignored. Third, tags and parameters are not case 
sensitive. Fourth, each tag starts with a leading colon. Fifth,. each tag line can wrap to multiple lines in a 

20 panel definition file. .PDF. Sixth, leading spaces on the tag line are ignored, even if the source line is split in 
the middle of a quoted string. Seventh, the tag line is always terminated with a period. 

Block tags are used in pairs. They are typically used to enclose a collection of other tags. The end tag 
is defined the same as the start tag but with a preceding forward slash. That is, if "WINOOWDEF" is the 
start tag for a block, e.g., a window definition block, then "/WINDOWDEF" is the end tag for the block. 

25 An existing window or message box is made up of source tags that are stored in a .PDF file. "Opening" 

the .PDF file causes the source tags residing in the .PDF file to be compiled and displayed as a window or 
message box. A "Save" action causes the source tags to be written to a .PDF file. 

The .PDF file must include an entry for the total panel, an entry for each object within the panel, and a 
linked list connecting the entries for each sub-object nested within a larger object. In the linked list each 
30 entry has a field containing the next entry in the list. 

One problem with prior art graphical user interface editors is that changes are lost at the source file 
level after the file is compiled and saved. 

According to the invention described herein, the interface between User Interface Editor (UIE) and the 
User Interface Compiler (UIC), the end-user creates source files. These end-user created source files 
35 contain tag language which defines Graphical User Interface (GUI) panels. This is accomplished using either 
UIE or editing the tags with a text editor. 

Tag language files are the only input and output of UIE. Tag language files can be generated by UIE, 
modified with a text editor, and then read back in to UIE. Any such modifications will be preserved and 
contained in the tag language file that is created by UIE, thus maintaining the integrity of the source file 
40 regardless of how it is edited. This process can be repeated as many times as necessary, providing 
maximum flexibility to the user in creating and modifying panels. This is made possible by fully integrating 
the UIE and the UIC, and calling the UIC as an application program interface rather then a process call. 
When a tag language file is read in to the UIE, it invokes the UIC, according to the following functionality: 
Open the TAG file. 

45 Select the panel (by name if there is more then one panel definition file). 

Issue a function call to the User Interface Compiler to compile the panel in the panel 
definition file. 

Read the panel binary intermediate file. 

This pseudo code invokes the User Interface Compiler (UIC). The User Interface Compiler (UIC) 
so converts the source tags to a binary representation and writes it to a file. The User Interface Editor (UIE) 
then reads this binary file into a structure in memory and uses it to keep track of all panel updates made by 
the user. When all desired modifications have been completed. UIE creates source tags from the binary 
data structure and writes them to a user-specified file. 

55 
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COMPILING THE GRAPHICAL USER INTERFACE SOURCE CODE FILE TO OBTAIN A GRAPHICAL USER 
INTERFACE OBJECT CODE FILE 

The relationship of the file types and the steps of the invention is shown with particularity in FIGURE 5. 
including FIGURES 5A. 5B, and 5C. 

The .PDF files are created by the end-user using the Graphical User Interface Editor or a text editor. 
The Ul compiler converts the Panel Definition Files ( PDF) into into Panel Binary Intermediate Files (PBI). 
The User Interface Linker is then called. The User Interface Linker creates files containing panel definition 
information. These include the following file types: 

BIN For each .Panel Binary Intermediate (PBI) file a BIN file is created containing binary instruc- 
tions for building the panel. 
.PDI One .PDI - Panel Definition Intermediate - file is created containing an "include" statement for 

each of the .BIN files and resource files defined in the .PDF files. 
H One .H file is created containing ^DEFINE statements for ail of the controls, text strings, help 

panels, etc. defined in the panel. This file is used in subsequent build process steps. The .H file 
is included in the application used with the Ul component. 
.PMI One .PMI (Panel Machine Readable Information) file, which is machine readable, is created 

containing all of the text for all of the panels. 
.PHI One .PHI (Panel Help Intermediate) file is created containing all of the help panel text for all of 
the help panels. 

.DEF Two temporary .DEF (Definition) files are created for use in subsequent build process steps. 
In FIGURE 5B, the .DEF files and the STUB file are linked with the LINKER, and the .BIN file output, the 
.PDI file, and the .H file are compiled, to create a .PDL (panel definition library) file. 

In FIGURE 5C the .DEF files and the STUB file are linked with the LINKER, and the PMI file output, 
and the .H file are compiled, to create a .PML (panel message library) file. 
The resulting output is then stored in a suitable file. 

Thus, according to the invention there is provided a Graphical User Interface editor that enables an end- 
user to define, create, or edit a Graphical User Interface. This is accomplished by a user-friendly Graphical 
User Interface editor, that is, a Graphical User Interface editor that interchangeability utilizes a What-You- 
See-ls-What-You-Get (WYSIWYG) editor and'or a text editor interchangeably. 

The graphical user interface editor of the invention provides the end-user with the ability to compile and 
save the resulting (edited or created) GUI panel, including the end-user with the ability to save the edited 
source code corresponding to the edited GUI panel. This enhances the ability of the end-user to further 
modify or edit, or even copy, the Graphical User Interface File. 

Claims 

1. A method of doing one or more of defining, creating, or editing a graphical user interface panel file 
comprising: 

40 a. opening a graphical user interface source code file: 

b. compiling the graphical user interface source code file to form a graphical user interface object 
code file; and 

c. storing the compiled graphical user interface object code file in a Pane! Binary Intermediate (PBI) 
file. 

2. The method of claim 1 comprising opening the graphical user source code file in a graphical user 
interface editor. 

3. The method of claim 1 comprising opening the graphical user interface source file, wherein the source 
50 file contains graphical user interface defining tag files. 

4. The method of claim 3 wKerein the tag files describe the panel. 

5. The method of claim 3 wherein the tag files describe the objects within the graphical user interface 
55 panel. 

6. The method of claim 3 wherein the user interface source file is a user defined panel definition file. 
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The method of claim 6 wherein the user defined panel definition file is a source code file. 

The method of claim 6 wherein the user defined panel definition file is a linked list. 

The method of claim 1 comprising calling the User interface Compiler through an Application Program 
Interface. 

A method of doing one or more of defining, creating, or editing a graphical user interface panel file 
comprising: 

a. opening a graphical user interface source code file containing a linked list of source code tag files 
that describe the panel in a graphical user interface editor; 

b. calling a user interface compiler through an application program interface; 

c. compiling the graphical user interface source code file in the user interface compiler to form a 
graphical user interface object code file; and 

d. storing the compiled graphical user interface object code file in a Panel Binary Intermediate (PBI) 
file. 
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